// 实现这个项目的构建任务
// "clean": "gulp clean",
// "lint": "gulp lint",
// "serve": "gulp serve",
// "build": "gulp build",
// "start": "gulp start",
// "deploy": "gulp deploy --production"

const { src, dest, parallel, series, watch } = require("gulp");
const loadPlugins = require("gulp-load-plugins");
const del = require("del");
const bs = require("browser-sync");
let { options, data } = require("./project_config");

const plugins = loadPlugins();
// const sass = require("gulp-sass");
// const babel = require("gulp-babel");
// const swig = require("gulp-swig");
// const imagemin = require("gulp-imagemin");

options = Object.assign({
    scss: "src/assets/styles/*.scss",
    js: "src/assets/scripts/*.js",
    html: "src/*.html",
    image: "src/assets/images/**",
    font: "src/assets/fonts/**",
    ext: "public/**",
    distSrc: "dist",
    temp: "temp"
}, options);

const style = done => {
    return src(options.scss, { base: "src" })
        .pipe(plugins.sass({
            outputStyle: "expanded"
        }))
        .pipe(dest(options.temp))
        .pipe(bs.reload({ stream: true }))
}

const script = done => {
    return src(options.js, { base: "src" })
        .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
        .pipe(dest(options.temp))
        .pipe(bs.reload({ stream: true }))
}

const html = done => {
    return src(options.html, { base: "src" })
        .pipe(plugins.swig(
            {
                data,
                defaults: {
                    cache: false
                }
            }
        ))
        .pipe(dest(options.temp))
        .pipe(bs.reload({ stream: true }))
}

const image = done => {
    return src(options.image, { base: "src" })
        .pipe(plugins.imagemin())
        .pipe(dest(options.distSrc))
}

const font = done => {
    return src(options.font, { base: "src" })
        .pipe(plugins.imagemin())
        .pipe(dest(options.distSrc))
}

const ext = done => {
    return src(options.ext, { base: "public" })
        .pipe(dest(options.distSrc))
}

const useref = done => {
    return src('temp/*.html', { base: options.temp })
        .pipe(plugins.useref({ searchPath: [options.temp, '.'] }))
        // html js css
        .pipe(plugins.if(/\.js$/, plugins.uglify()))
        .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
        .pipe(plugins.if(/\.html$/, plugins.htmlmin({
            collapseWhitespace: true,
            minifyCSS: true,
            minifyJS: true
        })))
        .pipe(dest("release"))
}

const clean = done => {
    return del([options.distSrc, options.temp]);
}

const delRelease = done => {
    return del(["release"]);
}

const serve = done => {
    watch(options.scss, style);
    watch(options.js, script);
    watch(options.html, html);
    // watch(options.image, image);
    // watch(options.font, font);
    // watch(options.ext, ext);

    watch([
        options.image,
        options.font,
        options.ext
    ], bs.reload);

    bs.init({
        notify: false,
        // files: options.distSrc**",
        server: {
            baseDir: [options.temp, "src", "public"],
            routes: {
                '/node_modules': 'node_modules'
            }
        },

    })
}
const compile = parallel(style, script, html)
 

const build = series(delRelease, clean, parallel(series(compile, useref), image, font, ext))

const start = series(compile, serve);

// const deploy = series(delRelease, clean, parallel(series(compile, useref), image, font, ext))

module.exports = {
    clean,
    serve,
    build,
    start,
    // deploy
}